import React, { Component } from 'react'

/*
    因为 Footer 组件要被 页面1 和 页面2 使用，那么所以 Footer 组件要
    单独定义，可以在不同页面中多次被使用
*/
class Footer extends Component {
    render() {
        return (<>
            <footer style={{ backgroundColor: '#f66', height: 50 }}>页脚</footer>
        </>)
    }
}

const Page1 = () => {
    // 就是如果我们组件模板内容比较复杂的情况下，可以使用 () 包裹，这样可以更
    // 直观的看到他是一个整体，当然不包也没有任何问题
    return (<>
        <h1>Page1 页面 </h1>
        <Footer />
        {/* <footer style={{ backgroundColor: '#f66', height: 50 }}>页脚</footer> */}
    </>)
}

const Page2 = () => {
    return <>
        <h1>Page2 页面 </h1>
        <Footer />
        {/* <footer style={{ backgroundColor: '#f66', height: 50 }}>页脚</footer> */}
    </>
}

export default class App extends Component {
    render() {
        return (
            <div>
                <Page1 />

                <hr />

                <Page2 />

            </div>
        )
    }
}
